$(function () {
    let a = false
    $('.change').on('click', function () {
        a = false
        $.get('/my/random-avatar').then(res => {
            $('#picture').attr('src', 'http://127.0.0.1:3000/avatar/' + res.data)
        })
    })
    $('.moco-btn-blue').on('click', function () {
        const avatar = $('#picture').attr('src')
        $.post('/my/random-img', {
            avatar
        }).then(res => {
            if (res.status !== 0) {
                alert('上传失败')
            }
            Render()
            layui.layer.msg(res.message)
            $('.edit-avator').hide()
            $('.moco-modal-blackout').hide()
        })
    })



    // 收藏网站
    $('.header-favorites').on('mouseenter', function () {
        $('.favorites-tips').show()
    })
    $('.header-favorites').on('mouseleave', function () {
        $('.favorites-tips').hide()
    })

    // 移入作者
    const height = $('.nav-search-box').height()
    $('.input-search').addClass('hide')
    $('.nav-search-box').css({
        height: 0
    })
    $('.search-box').on('click', function () {
        $(this).find('a .fang-djing').hide()
        $('.input-search').show().find('.nav-search-box').show().animate({
                height
            },
            100)
        $('.nav-search-input').focus()
    })
    $('.nav-search-input').on('blur', function () {
        $('.nav-search-box').css({
            height: 0
        })
        $('.input-search').hide()
        $('.fang-djing').show()
    })
    // 移入头像添加类名
    $('#personal-center').mouseenter(function () {
        $('#header-avator img').addClass('red')
        $('.g-user-card').show()
    })
    $('#personal-center').mouseleave(function () {
        $('#header-avator img').removeClass('red')
        $('.g-user-card').hide()
    })


    //编辑    
    $('.pull-right').on('click', function () {
        $('body').css('overflow-y', 'hidden')
        $('.edit-info').show().css('opacity', '1')
        $('.moco-modal-blackout').show()
    })
    $('.moco-modal-close').on('click', function () {
        $('body').css('overflow-y', 'auto')
        $('.edit-info').hide()
        $('.moco-modal-blackout').hide()
        $('.edit-avator').hide()
    })

    // 头像
    $('.avator-mode').on('mouseenter', function () {
        $('.update-avator').css('bottom', '0px')
    })
    $('.avator-mode').on('mouseleave', function () {
        $('.update-avator').css('bottom', '-33px')
    })

    $('.moco-btn-normal').on('click', function () {
        $('body').css('overflow-y', 'auto')
        $('.edit-info').hide()
        $('.moco-modal-blackout').hide()
        $('.edit-avator').hide()
    })

    $('.update-avator').on('click', function () {
        $('body').css('overflow-y', 'hidden')
        $('.edit-avator').show()
        $('.moco-modal-blackout').show()
    })

    // 修改头像
    $('.avator-btn-fake').on('click', function () {
        $('#upload').click()
    })

    $('#upload').on('change', function () {
        a = true
        const file = this.files[0]
        const src = window.URL.createObjectURL(file)
        $('.avator-mode-big img').attr('src', src)
    })

    $('#js-avator-save').on('click', function () {
        if (!a) return
        // 2. 获取文件
        const files = $('#upload')[0].files
        // 3. 不能上传空文件
        // if (files.length <= 0) return alert('请选择文件')
        // 4. 将文件 添加到 formData对象  
        const formData = new FormData()
        formData.append('avatar', files[0])
        if (formData) {
            $.ajax({
                method: 'post',
                url: '/my/update/avatar',
                data: formData,
                // $.ajax 默认的请求头为 json类型
                contentType: false,
                // 不对formData对象进行编码
                processData: false,
                success: res => {
                    if (res.status !== 0) {
                        alert('上传失败')
                    }
                    $('.edit-avator').hide()
                    $('.moco-modal-blackout').hide()
                    Render()
                }
            })
        }
    })

    // 退出登入
    $('.card-sets a').on('click', function () {
        layer.confirm('你确定要退出吗', {
            title: '提示',
            icon: 3
        }, index => {
            location.href = '/login.html'
            localStorage.removeItem('BIG_EVENT_TOKEN')
            layer.close(index)
        })
    })

    // 个性签名
    $('#aboutme').on('input', function () {
        const value = $(this).val().length
        const count = 128 - value
        if (count < 0) {
            $('.numCanInput').html(`已超出<span class = "red_count">${-count}</span>个字符`)
        } else {
            $('.numCanInput').text(`还可以输入${count}个字符`)
        }
    })

    // 修改个人信息
    $('.moco-modal-dialog form').submit(function () {
        const data = $(this).serializeArray()
        const id = $(this).data('id')
        const query = {}
        for (key of data) {
            query[key.name] = key.value
        }
        console.log(query)
        $.post('/my/userinfo', {
            ...query,
            id
        }).then(res => {
            if (res.status !== 0) {
                alert('修改失败')
            }
            layui.layer.msg(res.message)
            $('.edit-info').hide()
            $('.moco-modal-blackout').hide()
            Render()
        })
        return false
    })

    // 渲染数据
    Render()

    function Render() {
        $.get('/my/userinfo').then(res => {
            if (res.status == 1 && res.message === 'token失效或错误') {
                location.href = '/login.html'
                return layer.msg('token失效或错误')
            }
            const {
                id,
                nickname,
                avatar,
                position,
                sex,
                region,
                profile
            } = res.data
            $('.info-wapper').html(template('tep-wapper', {
                data: res.data
            }))
            $('.des-mode span').text('ID:' + id)
            $('.moco-modal-dialog form').attr('data-id', id)
            const text = $('#name').text()
            $('.nickname').attr('value', text)
            if (nickname) {
                $('#name, .des-mode p').text(nickname)
                $('.nickname').attr('value', nickname)
            }
            if (position) {
                [...$('#job option')].find(a => a.innerText == position).selected = true
            }
            if (region) {
                [...$('#province option')].find(item => item.innerText == region).selected = true
            }
            if (sex) {
                [...$('.rlf-group input')].find(item => item.value == sex).checked = true
            }
            if (avatar.startsWith('/upload')) {
                $('.avator-mode-big, .avator').attr('src', 'http://127.0.0.1:3000' + avatar)
            } else {
                $('.avator-mode-big, .avator').attr('src', avatar)
            }
            if (profile) {
                $('.pr').val(profile)
            }
        })
    }

})